<template>
    <div class="container">
        <span v-for="item in dataList" class="card">
            <el-card style="max-width: 480px" shadow="hover">
                <!-- <template #header>Yummy hamburger</template> -->
                <el-image style="width: 200px; height: 200px" :src="item.coverFilePreviewUrl" :zoom-rate="1.2" :max-scale="7"
                    :min-scale="0.2" :preview-src-list="item.fileUrlList" :initial-index="4" fit="cover"
                    :preview-teleported="true" />
                <template #footer class="footer">{{ item.collectionName }}</template>
            </el-card>
        </span>
    </div>

</template>
<script setup lang='ts'>
import { ref } from 'vue';
import { listAll } from "@/api/albumCollection/albumCollection";
import type { AlbumCollectionData } from '@/api/albumCollection/albumCollection';
import { showErrorMsg } from '@/api/common';
import type { ApiResponse } from '@/api/common';
const dataList = ref<AlbumCollectionData[]>([]);
const listAllData = () => {
    listAll().then((res: ApiResponse<AlbumCollectionData[]>) => {
        if (res.status != 200) {
            showErrorMsg(res.msg);
            return;
        }
        dataList.value = res.data;
    })
}
listAllData();
</script>
<style scoped>
.container {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

.card {
    margin-left: 15px;
    margin-top: 15px;
}

.footer {
    text-align: center;
}
</style>